<template>
  <section id="features" class="observe">
    <div class="container">
      <h2>工具特色</h2>
      
      <div class="features">
        <!-- 特性 1: 模力 Agent -->
        <div class="card">
          <div class="shot">
            <div class="ui">
              <div class="toolbar">
                <div class="pill"></div>
                <div class="pill"></div>
                <div class="pill"></div>
              </div>
              <div class="chat">
                <div class="msg user">
                  <div class="avatar">👤</div>
                  <div class="bubble">帮我剪一个产品介绍视频，素材在「产品发布会」文件夹</div>
                </div>
                <div class="msg bot">
                  <div class="avatar">🤖</div>
                  <div class="bubble">
                    <div class="typewriter-line">已找到「产品发布会」文件夹，包含 24 个视频素材和 8 张图片</div>
                  </div>
                </div>
                <div class="msg bot">
                  <div class="avatar">🤖</div>
                  <div class="bubble">
                    <div class="typewriter-line">正在分析素材内容，提取关键镜头...</div>
                  </div>
                </div>
                <div class="msg bot">
                  <div class="avatar">🤖</div>
                  <div class="bubble">
                    <div class="typewriter-line">已创建产品介绍视频初稿，包含开场、产品特性展示和结尾号召部分</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <h3>模力 Agent：聊着天就会剪</h3>
          <p>识别素材库，理解指令，自动找镜头段落与添加剪辑包装。</p>
        </div>
        
        <!-- 特性 2: AI 脚本剪 -->
        <div class="card">
          <div class="shot">
            <div class="ui">
              <div class="toolbar">
                <div class="pill"></div>
                <div class="pill"></div>
                <div class="pill"></div>
              </div>
              <div class="script">
                <div class="script-line active">今天我们来测评这款新上市的智能手表</div>
                <div class="script-line">它采用了全新的健康监测算法</div>
                <div class="script-line">续航能力提升了40%，达到惊人的7天</div>
              </div>
              <div class="timeline">
                <div class="track video">
                  <div class="clip"></div>
                  <div class="clip active"></div>
                  <div class="clip"></div>
                </div>
                <div class="track audio">
                  <div class="clip"></div>
                </div>
                <div class="track text">
                  <div class="clip"></div>
                </div>
              </div>
            </div>
          </div>
          <h3>AI 脚本剪：有脚本就能出片</h3>
          <p>一键匹配素材、剪辑镜头，自动生成精美画面与字幕。</p>
        </div>
        
        <!-- 特性 3: 多语言与配音 -->
        <div class="card">
          <div class="shot">
            <div class="ui">
              <div class="toolbar">
                <div class="pill"></div>
                <div class="pill"></div>
                <div class="pill"></div>
              </div>
              <div class="langs">
                <div class="lang-item active">中文</div>
                <div class="lang-item">English</div>
                <div class="lang-item">日本語</div>
                <div class="lang-item">Español</div>
              </div>
              <div class="subtitle">
                <div class="sub-line">我们的产品已经覆盖全球超过 50 个国家</div>
                <div class="sub-line eng">Our products now cover over 50 countries worldwide</div>
              </div>
              <div class="voices">
                <div class="voice-item">
                  <div class="voice-avatar">👩🏻</div>
                  <div class="voice-name">小云</div>
                  <div class="voice-wave"></div>
                </div>
                <div class="voice-item active">
                  <div class="voice-avatar">👨🏻</div>
                  <div class="voice-name">小刚</div>
                  <div class="voice-wave active"></div>
                </div>
              </div>
            </div>
          </div>
          <h3>多语言与配音：全球化发布</h3>
          <p>自动生成中英文字幕与配音，支持多语种本地化。</p>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { onMounted } from 'vue';

// 打字机动画重置
const resetTypewriterAnimation = () => {
  const typewriterLines = document.querySelectorAll('.typewriter-line');
  typewriterLines.forEach(line => {
    line.style.animation = 'none';
    line.offsetHeight; // 触发重排
    line.style.animation = null;
  });
};

// 生命周期钩子
onMounted(() => {
  // 设置打字机动画重置定时器
  setInterval(resetTypewriterAnimation, 10000);
  
  // 设置观察器，当元素进入视口时添加reveal类
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('reveal');
      }
    });
  }, { threshold: 0.12 });
  
  document.querySelectorAll('.observe .card').forEach(el => {
    observer.observe(el);
  });
});
</script>

<style scoped>
/* 特性区域样式 */
#features {
  padding: 80px 0;
  background: #f8faff;
}

:root.dark #features {
  background: #0a1428;
}

h2 {
  text-align: center;
  font-size: 36px;
  margin-bottom: 60px;
}

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.card {
  background: #ffffffee;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 102, 255, 0.08);
  transition: all 0.4s ease;
  opacity: 0;
  transform: translateY(20px);
  border: 0.5px solid rgba(0, 102, 255, 0.08);
}

.card.reveal {
  opacity: 1;
  transform: translateY(0);
}

:root.dark .card {
  background: #0f1a33dd;
  border-color: #1d2a4a;
}

.card:nth-child(2) {
  transition-delay: 0.2s;
}

.card:nth-child(3) {
  transition-delay: 0.4s;
}

.shot {
  height: 220px;
  margin-bottom: 24px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #eef3ff, #f6faff);
  position: relative;
}

:root.dark .shot {
  background: linear-gradient(135deg, #1c2740, #27314a);
}

.ui {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.toolbar {
  height: 36px;
  background: linear-gradient(180deg, #ffffffcc, #ffffff99);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
  border-bottom: 1px solid #e1e8f5;
}

:root.dark .toolbar {
  background: linear-gradient(180deg, #0f1a33cc, #0f1a3399);
  border-bottom: 1px solid #1d2a4a;
}

.pill {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e1e8f5;
}

.pill:nth-child(1) {
  background: #ff5f57;
}

.pill:nth-child(2) {
  background: #febc2e;
}

.pill:nth-child(3) {
  background: #28c840;
}

/* 聊天界面样式 */
.chat {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.msg {
  display: flex;
  gap: 8px;
  max-width: 85%;
}

.msg.bot {
  align-self: flex-start;
}

.msg.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f0f8ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border: 1px solid #e1e8f5;
}

:root.dark .avatar {
  background: #1a2b4a;
  border-color: #1d2a4a;
}

.bubble {
  background: #f0f8ff;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
  border: 1px solid #e1e8f5;
}

:root.dark .bubble {
  background: #1a2b4a;
  border-color: #1d2a4a;
}

.msg.user .bubble {
  background: #0066ff;
  color: white;
  border: none;
}

.typewriter-line {
  display: inline-block;
  overflow: hidden;
  border-right: 2px solid var(--primary);
  white-space: nowrap;
  margin: 0;
  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
  animation-fill-mode: forwards;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: var(--primary) }
}

/* 脚本界面样式 */
.script {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.script-line {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.4;
  border: 1px solid var(--line);
}

.script-line.active {
  border-color: var(--primary);
  background: var(--primary-light);
}

.timeline {
  height: 80px;
  background: var(--timeline-bg);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.track {
  height: 20px;
  background: var(--track-bg);
  border-radius: 4px;
  position: relative;
  display: flex;
  gap: 2px;
  padding: 2px;
}

.track.video {
  background: rgba(0, 102, 255, 0.1);
}

.track.audio {
  background: rgba(255, 102, 0, 0.1);
}

.track.text {
  background: rgba(0, 204, 102, 0.1);
}

.clip {
  height: 16px;
  background: var(--clip-bg);
  border-radius: 3px;
  flex: 1;
}

.track.video .clip {
  background: rgba(0, 102, 255, 0.3);
}

.track.video .clip.active {
  background: rgba(0, 102, 255, 0.7);
}

.track.audio .clip {
  background: rgba(255, 102, 0, 0.3);
}

.track.text .clip {
  background: rgba(0, 204, 102, 0.3);
}

/* 多语言界面样式 */
.langs {
  display: flex;
  padding: 12px;
  gap: 8px;
  overflow-x: auto;
}

.lang-item {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  background: var(--lang-bg);
  white-space: nowrap;
  cursor: pointer;
}

.lang-item.active {
  background: var(--primary);
  color: white;
}

.subtitle {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sub-line {
  padding: 10px;
  background: var(--sub-bg);
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.4;
}

.sub-line.eng {
  color: var(--text-muted);
  font-style: italic;
}

.voices {
  padding: 12px;
  display: flex;
  gap: 12px;
}

.voice-item {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.voice-item.active {
  border-color: var(--primary);
  background: var(--primary-light);
}

.voice-avatar {
  font-size: 20px;
}

.voice-name {
  font-size: 12px;
  font-weight: 500;
}

.voice-wave {
  width: 80%;
  height: 20px;
  background: var(--wave-bg);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.voice-wave.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, var(--primary-light), var(--primary), var(--primary-light));
  animation: wave 2s ease-in-out infinite;
  background-size: 200% 100%;
}

@keyframes wave {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

h3 {
  font-size: 20px;
  margin-bottom: 12px;
}

p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .features {
    grid-template-columns: 1fr;
  }
  
  h2 {
    font-size: 30px;
    margin-bottom: 40px;
  }
}
</style>